//通过Vue.component进行全局注册;
Vue.component('button-contuer',{
    data: function(){
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">you clicked me {{ count }} times </button>'
})
// data必须是一个函数
new Vue({
    el :'#components-demo'
})

//通过Prop向子组件传递数据
Vue.component('blog-post',{
    props:['title'],
    template:'<h3>{{ title }}</h3>'
})

new Vue({
    el:'#app4',
    data:{
        posts:[
            { id : 1, title: 'My journey with Vue' },
            { id : 2, title: 'Blogging with me'},
            { id : 3, title: 'why Vue is so fun'}
        ]
    }
})

Vue.component('blog-post',{
    props:['post'],
    template: `
    <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <button>
        Enlarge text
    </button>
    <div v-html="post.content"></div>
    `
})


new Vue({
    el: '#blog-posts-events-demo',
    data: {
        posts: [/* ... */],
        postFontSize: 1
    }
})

//在组件上使用v-model
Vue.component('custom-input',{
    props: ['value'],
    template :`
        <input
            v-bind:value='value'
            v-on:input="$emit('input', $event.target.value)"
            placeholder:"please enter your message"
        >
    `
})
